<template>
  <div class="chub_detail">
    <navbar>测评详情</navbar>

    <div class="wrapper">
      <div class="content">
        <div><img class="blockImg" :src="chubDetail.detailimgurl"></div>
        <div class="title">
          <h2>{{ chubDetail.title }}</h2>
          <div class="user">
            <div class="portrait">
              <div class="img" v-if="chubDetail.headimgurl" :style="{backgroundImage:'url('+chubDetail.headimgurl+')'}"></div>
            </div>
            <p class="vlc-nowrap">{{ chubDetail.username }}</p>
            <div>{{ chubDetail.publish_time | time16 }}</div>
          </div>
          <div class="tags">
            <ul>
              <li class="mx-1px" v-for="i in chubDetail.tags">{{ i.name }}</li>
            </ul>
          </div>
        </div>
        <div class="review" v-if="chubDetail.extra">
          <ul>
            <li>
              <div class="left">装备测评</div>
              <div class="right">{{ chubDetail.extra.equipment_name }}</div>
            </li>
            <li>
              <div class="left">分类</div>
              <div class="right">
                <ul>
                  <li v-for="i in chubDetail.extra.classify">{{ i }}</li>
                </ul>
              </div>
            </li>
            <li>
              <div class="left">整体评分</div>
              <div class="right">
                <ul class="'score_'+chubDetail.extra.score">
                  <li><i class="iconfont icon-shoucang-fill"></i></li>
                  <li><i class="iconfont icon-shoucang-fill"></i></li>
                  <li><i class="iconfont icon-shoucang-fill"></i></li>
                  <li><i class="iconfont icon-shoucang-fill"></i></li>
                  <li><i class="iconfont icon-shoucang-fill"></i></li>
                </ul>
              </div>
            </li>
            <li>
              <div class="left">装备亮点</div>
              <div class="right">{{ chubDetail.extra.equipment_merit }}</div>
            </li>
            <li>
              <div class="left">不足之处</div>
              <div class="right">{{ chubDetail.extra.equipment_lack }}</div>
            </li>
          </ul>
        </div>
        <div class="con" v-html="chubDetail.content"></div>
        <div class="view"><div class="iconfont icon-liulan"></div><div>浏览</div><div>{{ chubDetail.page_view }}</div></div>
      </div>
      <div class="bottomBar">
        <div v-bind:class="'mx-1px-right favo_'+favoStatus" @click="favo">
          <i class="iconfont icon-shoucang"></i>
          <span>{{isFavoState}}</span>
        </div>
        <div class="mx-1px-right" @click="shareTip=!shareTip">
          <i class="iconfont icon-fenxiang"></i>
          <span>分享</span>
        </div>
        <div class="mx-1px-right" @click="go('chub_comments', id)">
          <i class="iconfont icon-xinxi"></i>
          <span>评论</span>
        </div>
        <div @click="go('chub_goods', id)" style="font-size: 16px">查看商品清单</div>
      </div>

    </div>
    <div class="share-tip" v-show="shareTip" @click="shareTip=!shareTip"><div></div></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import js from '../../../cores/chub/detail.vue';
  import navbar from '../../../components/base/navbar.vue';
  export default {
    extends: js,
    components:{
        navbar
    }
  }
</script>
<style rel="stylesheet/less" lang="less">
  @import "../../../styles/chub.less";
  .chub_detail{
    .con{
    img{
      width: 100%;
    }
    }
  }

</style>
